import classNames from 'classnames';
import { format } from 'date-fns';
import { camelCase } from 'lodash';
import { useTranslation } from 'react-i18next';
import Button from 'src/component/Button';
// import { BalanceTransaction } from 'src/model/Property';
import { bnFormat } from 'src/util/bigNumber';
import style from './Card.module.scss';

type BalanceTransaction = any

type Props = {
    data: BalanceTransaction[];
    navigateCallback: (transaction: BalanceTransaction) => void;
};

const Card = ({ data, navigateCallback }: Props) => {
    const { t } = useTranslation();

    const onDetailClick = (transaction: BalanceTransaction) => () => {
        navigateCallback(transaction);
    };

    const elementMapFunction = (
        transaction: BalanceTransaction,
        index: number,
        array: BalanceTransaction[],
    ) => (
        <div key={transaction.FID}>
            <div className={style.self}>
                <div className={style.item}>
                    <div className={style.label}>{"数量"}</div>
                    <div className={style.value}>{bnFormat(transaction.FQuantity)}</div>
                </div>
                <div className={style.item}>
                    <div className={style.label}>{"余额"}</div>
                    <div className={style.value}>{bnFormat(transaction.FCoin)}</div>
                </div>
                <div className={style.item}>
                    <div className={style.label}>{"资讯"}</div>
                    <div className={style.infoValue}>
                        {transaction.FNote}
                        {/* {!['修正', '提领手续费', '团队返佣收入', '阶级返佣收入'].includes(
                            transaction.FNote,
                        ) && (
                                <Button appearance="text" onClick={onDetailClick(transaction)}>
                                    详情
                                </Button>
                            )} */}
                    </div>
                </div>
                <div className={style.others}>
                    <div>{format(Date.parse(transaction.FAddtime), 'yyyy/MM/dd HH:mm:ss')}</div>
                </div>
            </div>
            <div className={classNames(style.divider, { [style.hide]: index >= array.length - 1 })} />
        </div>
    );

    return <div>{data.map(elementMapFunction)}</div>;
};

export default Card;
